<template>
  <div class="deviceClass">
    <div class="searchDiv">
      <Form :model="searchItem" :label-width="80">
      <Row :gutter="10">
        <Col span="6">
             <FormItem label="功能位置">
              <Input v-model="searchItem.gnwz" placeholder="请输入"></Input>
            </FormItem>
        </Col>
        <Col span="6">
            <FormItem label="地理位置">
              <Input v-model="searchItem.dlwz" placeholder="请输入"></Input>
            </FormItem>
        </Col>
        <Col span="6">
            <FormItem label="失效状态">
              <Input v-model="searchItem.sxzt" placeholder="请输入"></Input>
            </FormItem>
        </Col>
        <Col span="6">
            <FormItem label="失效后果">
              <Input v-model="searchItem.sxhg" placeholder="请输入"></Input>
            </FormItem>
        </Col>
        <Col span="6">
            <FormItem label="关键度分级">
              <Input v-model="searchItem.gjdfj" placeholder="请输入"></Input>
            </FormItem>
        </Col>
        <Col span="6">
            <FormItem label="运行频度">
              <Input v-model="searchItem.yxpd" placeholder="请输入"></Input>
            </FormItem>
        </Col>
        <Col span="6">
            <FormItem label="工作环境">
              <Input v-model="searchItem.gzhj" placeholder="请输入"></Input>
            </FormItem>
        </Col>
        <Col span="6">
            <FormItem label="显隐性">
              <Input v-model="searchItem.xyx" placeholder="请输入"></Input>
            </FormItem>
        </Col>
        <Col span="6">
            <FormItem label="主工作中心">
              <Input v-model="searchItem.zgzzx" placeholder="请输入"></Input>
            </FormItem>
        </Col>
        <Col span="12">
            <Button type="primary" class="searchBt" @click="pageNo=1;getDataList()">查询</Button>
            <Button type="success" class="searchBt" @click="addModal">新增设备分类</Button>
            <Button type="info" class="searchBt">导入Excel</Button>
            <Button type="success" @click="downBtn" class="searchBt">导出Excel</Button>
        </Col>
       </Row>
      </Form>
    </div>
    <Table border :columns="columns" :loading="loading" :data="tableData"></Table>
    <!-- 新增弹窗开始 -->
    <Modal :mask-closable="false" v-model="modal1" :title="title1" width="800">
      <Form :model="formItem" :label-width="120">
         <Row :gutter="10">
            <Col span="12">
              <FormItem label="功能位置">
                <Input v-model="formItem.gnwz" :maxlength="20" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="功能位置描述">
                <Input v-model="formItem.gnwzms" :maxlength="50" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="地理位置">
                <Input v-model="formItem.dlwz" :maxlength="10" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="失效状态">
                <Input v-model="formItem.sxzt" :maxlength="10" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="系统工程师评定结果">
                <Input v-model="formItem.pdjg1" :maxlength="20" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="失效后果">
                <Input v-model="formItem.sxhg" :maxlength="200" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="系统工程师评定结果">
                <Input v-model="formItem.pdjg2"  placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="关键度分级">
                <Input v-model="formItem.gjdfj" :maxlength="10" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="运行频度">
                <Input v-model="formItem.yxpd" :maxlength="10" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="工作环境">
                <Input v-model="formItem.gzhj" :maxlength="10" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="显隐性">
                <Input v-model="formItem.xyx" :maxlength="10" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="系统工程师评定结果">
                <Input v-model="formItem.pdjg3" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="主工作中心">
                <Input v-model="formItem.zgzzx" :maxlength="10" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="CCM清单对比">
                <Input v-model="formItem.ccm" :maxlength="10" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="备注">
                <Input type="textarea" :maxlength="50" v-model="formItem.remark" placeholder="请输入"></Input>
              </FormItem>
            </Col>
         </Row>
      </Form>
      <div slot="footer">
               <Button @click="modal1=false">取消</Button>
              <Button type="primary" :loading="btnClick" @click="ok">确定</Button>
          </div>
    </Modal>
    <Modal :mask-closable="false" v-model="modal2" width="360" class-name="vertical-center-modal" @on-ok="remove(delID)">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>确认删除</span>
        </p>
        <div style="text-align:center">
            <p>确认删除此数据么？</p>
        </div>
    </Modal>
      <Page show-total :total="total" :current="pageNo" :page-size='pageSize' show-elevator  @on-change='changePage' style="margin:20px auto;text-align:center"/>
    <!-- 新增弹窗结束 -->

  </div>
</template>

<script>

import {
  getTableData,
  add,
  update,
  del,
  downExcel
} from '@/api/deviceClass'

export default {
  data () {
    return {
      btnClick:false,
      loading:true,
      delID: 0,
      modal2: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      isAdd: true,

      modal1: false,
      title1: '新增设备分类',
      searchItem: {
        gnwz: '',
        dlwz: '',
        sxzt: '',
        sxhg: '',
        gjdfj: '',
        yxpd: '',
        gzhj: '',
        xyx: '',
        zgzzx: ''
      },
      formItem: {
        gnwz: '',
        gnwzms: '',
        dlwz: '',
        sxzt: '',
        pdjg1: '',
        sxhg: '',
        pdjg2: '',
        gjdfj: '',
        yxpd: '',
        gzhj: '',
        xyx: '',
        pdjg3: '',
        zgzzx: '',
        ccm: '',
        remark: ''
      },
      columns: [
        {
          type: 'index',
          width: 70,
          title: '序号',
          align: 'center',
          fixed: 'left'
        },
        {
          title: '功能位置',
          width: 100,
          key: 'gnwz'
        },
        {
          title: '功能位置描述',
          width: 130,
          key: 'gnwzms'
        },
        {
          title: '地理位置',
          width: 100,
          key: 'dlwz'
        },
        {
          title: '失效状态',
          width: 100,
          key: 'sxzt'
        },
        {
          title: '系统工程师评定结果',
          width: 200,
          key: 'pdjg1'
        },
        {
          title: '失效后果',
          width: 100,
          key: 'sxhg'
        },
        {
          title: '系统工程师评定结果',
          width: 200,
          key: 'pdjg2'
        },
        {
          title: '关键度分级',
          width: 120,
          key: 'gjdfj'
        },
        {
          title: '运行频度',
          width: 100,
          key: 'yxpd'
        },
        {
          title: '工作环境',
          width: 100,
          key: 'gzhj'
        },
        {
          title: '显隐性',
          width: 100,
          key: 'xyx'
        },
        {
          title: '系统工程师评定结果',
          width: 200,
          key: 'pdjg3'
        },
        {
          title: '备注',
          width: 100,
          key: 'remark'
        },
        {
          title: '主工作中心',
          width: 120,
          key: 'zgzzx'
        },
        {
          title: 'CCM清单对比',
          width: 130,
          key: 'ccm'
        },
        {
          title: '操作',
          key: 'action',
          width: 140,
          fixed: 'right',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params)
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.openDel(params.row.id)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      tableData: [
        {
          gnwz: '功能位置',
          gnwzms: '功能位置描述',
          dlwz: '地理位置',
          sxzt: '失效状态',
          pdjg1: '评定结果测试',
          sxhg: '失效后果',
          pdjg2: '评定结果测试',
          gjdfj: '关键度分级',
          yxpd: '运行频度',
          gzhj: '工作环境',
          xyx: '显隐性',
          pdjg3: '评定结果测试',
          remark: '备注测试',
          zgzzx: '主工作中心',
          ccm: 'CCM 清单对比'
        },
        {
          gnwz: '功能位置',
          gnwzms: '功能位置描述',
          dlwz: '地理位置',
          sxzt: '失效状态',
          pdjg1: '评定结果测试',
          sxhg: '失效后果',
          pdjg2: '评定结果测试',
          gjdfj: '关键度分级',
          yxpd: '运行频度',
          gzhj: '工作环境',
          xyx: '显隐性',
          pdjg3: '评定结果测试',
          remark: '备注测试',
          zgzzx: '主工作中心',
          ccm: 'CCM 清单对比'
        }
      ]

    }
  },
  methods: {
    downBtn(){
      downExcel(this.searchItem).then(res => {
         const blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;'});

        const ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),
            ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/),
            ieEDGE = navigator.userAgent.match(/Edge/g),
            ieVer = (ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));
        console.log('ie:' + ie);
        console.log('ieVer:' + ieVer);
        if (ie && ieVer < 10) {
            this.message.error('No blobs on IE<10');
            return;
        }
        if (ieVer > -1) {
            window.navigator.msSaveBlob(blob, '设备分类.xlsx');
        } else {
            const url = window.URL.createObjectURL(blob);
            let link = document.createElement('a');
            link.setAttribute('href', url);
            link.setAttribute('download', '设备分类.xlsx');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
        // const blob = new Blob([res]);//处理文档流
        //   const fileName = '设备分类.xlsx';
        //   const elink = document.createElement('a');
        //   elink.download = fileName;
        //   elink.style.display = 'none';
        //   elink.href = URL.createObjectURL(blob);
        //   document.body.appendChild(elink);
        //   elink.click();
        //   URL.revokeObjectURL(elink.href); // 释放URL 对象
        //   document.body.removeChild(elink);
      })
    },
    openDel (id) {
      this.modal2 = true
      this.delID = id
      // this.remove(params.index);
    },
    pageChange (e) {
      this.pageNo = e
      this.search()
    },
    remove (id) {
      del({ id: id }).then(res => {
        if (res.code == 0) {
          this.$Message.info('删除成功')
          this.pageNo=1;
          this.getDataList()
        } else {
          this.$Message.info(res.message)
        }
      }).catch(err => {
        console.error('err>' + JSON.stringify(err))
      })
    },
    addModal () {
      this.isAdd = true
      this.title1 = '新增设备分类'
      this.modal1 = true
      this.formItem={};
    },
    edit (params) {
      this.isAdd = false
      this.title1 = '编辑设备分类'
      this.formItem = params.row

      this.modal1 = true
    },
    ok () {
      this.btnClick=true;
      let params = {
        functionLocation: this.formItem.gnwz,
        functionLocationDescr: this.formItem.gnwzms,
        geographyLocation: this.formItem.dlwz,
        invalidStatus: this.formItem.sxzt,
        systemsEngineerAssessmentResult1: this.formItem.pdjg1,
        invalidConsequence: this.formItem.sxhg,
        systemsEngineerAssessmentResult2: this.formItem.pdjg2,
        criticalityGrading: this.formItem.gjdfj,
        runningFrequentness: this.formItem.yxpd,
        workEnvironment: this.formItem.gzhj,
        lawOfDominance: this.formItem.xyx,
        systemsEngineerAssessmentResult3: this.formItem.pdjg3,
        mainWorkCenter: this.formItem.remark,
        ccmListComparison: this.formItem.zgzzx,
        mark: this.formItem.ccm
      }
      console.log('params>' + JSON.stringify(params))
      if (this.isAdd) {
        add(params).then(res => {
          console.log('res>' + JSON.stringify(res))
          if (res.code == 0) {
            this.$Message.info('新增成功')
            this.getDataList()
             this.modal1=false;
            this.btnClick=false;
          } else {
            this.$Message.info(res.message)
            this.btnClick=false;
          }
        }).catch(err => {
          console.error('err>' + JSON.stringify(err))
        })
      } else {
        params.id = this.formItem.id
        update(params).then(res => {
          console.log('res>' + JSON.stringify(res))
          if (res.code == 0) {
            this.$Message.info('修改成功')
            this.getDataList()
             this.modal1=false;
            this.btnClick=false;
          } else {
            this.$Message.info(res.message)
            this.btnClick=false;
          }
        }).catch(err => {
          console.error('err>' + JSON.stringify(err))
        })
      }
    },
    /** 分页 */
    changePage (pageNo) {
      this.pageNo = pageNo
      this.getDataList()
    },
    getDataList () {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        functionLocation: this.searchItem.gnwz,
        geographyLocation: this.searchItem.dlwz,
        invalidStatus: this.searchItem.sxzt,
        invalidConsequence: this.searchItem.sxhg,
        criticalityGrading: this.searchItem.gjdfj,
        runningFrequentness: this.searchItem.yxpd,
        workEnvironment: this.searchItem.gzhj,
        lawOfDominance: this.searchItem.xyx,
        mainWorkCenter: this.searchItem.zgzzx
      }
      getTableData(params).then(res => {
        console.log('res>' + JSON.stringify(res))
        if (res.code == 0) {
          this.total = res.data.total
          let list = res.data.list
          this.tableData = list.map(item => {
            let it = {}
            it.id = item.id
            it.gnwz		=	item.functionLocation
            it.gnwzms	=	item.functionLocationDescr
            it.dlwz		=	item.geographyLocation
            it.sxzt		=	item.invalidStatus
            it.pdjg1	=	item.systemsEngineerAssessmentResult1
            it.sxhg		=	item.invalidConsequence
            it.pdjg2	=	item.systemsEngineerAssessmentResult2
            it.gjdfj	=	item.criticalityGrading
            it.yxpd		=	item.runningFrequentness
            it.gzhj		=	item.workEnvironment
            it.xyx		=	item.lawOfDominance
            it.pdjg3	=	item.systemsEngineerAssessmentResult3
            it.remark	=	item.mainWorkCenter
            it.zgzzx	=	item.ccmListComparison
            it.ccm		=	item.mark
            return it
          })
          this.loading=false
        }
      }).catch(err => {
        console.error('err>' + JSON.stringify(err))
      })
    }
  },
  mounted () {},
  created () {
    this.getDataList()
  }
}
</script>

<style lang="less">
.deviceClass {
  background: #fff;
  height: 100%;
  padding: 15px;
  font-size: 14px;
  .searchDiv {
    .searchBt {
      margin-left: 15px;
    }
  }
}
.sbsq {
  font-size:15px;
  padding-bottom:10px;
}
.ivu-form-item {
      margin-bottom:10px;
    }

</style>
